<template>
  <el-dialog
    :show-close="false"
    @open="openDialog"
    :modal="false"
    :visible="dialogVisible"
    :before-close="handleClose"
  >
    <div slot="title">导入配方编辑</div>
    <!-- <span>这是一段信息</span> -->
    <el-form
      class="export_form_box"
      style="margin-top: 10px"
      size="mini"
      label-width="auto"
      :model="form"
    >
      <div class="display_flex">
        <el-form-item
          label="炉批次:"
          prop="batchNumber"
          class="w100"
          style="margin-right: 10px"
        >
          <el-select
            @change="handleChangeBatch"
            class="w100"
            v-model="form.batchNumber"
            placeholder="请选择"
            collapse-tags
          >
            <el-option
              v-for="item in batchList"
              :key="item.id"
              :label="item.batchNumber"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-right: 10px" label="零件数:" class="w100">
          <el-input
            disabled
            placeholder="请输入"
            v-model="partTotalNumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="工装数:" class="w100">
          <el-input
            disabled
            placeholder="请输入"
            v-model="toolingNumber"
          ></el-input>
        </el-form-item>
      </div>

      <div class="parts_box">
        <div class="garp">零件信息</div>
        <div
          class="display_flex parts_list"
          v-for="(item, index) in partsList"
          :key="item.id"
        >
          <el-form-item :label="`${index + 1} 零件号:`" class="w100">
            <el-input
              disabled
              placeholder="请输入"
              v-model="item.partNumber"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="零件名称:"
            class="w100"
            style="margin-left: 10px; margin-right: 10px"
          >
            <el-input
              disabled
              placeholder="请输入"
              v-model="item.partName"
            ></el-input>
          </el-form-item>
          <el-form-item label="工装数:" class="w100">
            <el-input
              disabled
              placeholder="请输入"
              v-model="item.toolingNumber"
            ></el-input>
          </el-form-item>
        </div>
      </div>
      <img
        v-if="form.batchNumber"
        src="@/assets/images/testImg/lingjian_text.png"
        style="height: 260px; width: 100%"
        alt=""
      />
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters(["deviceRow"]),
  },
  data() {
    return {
      toolingNumber: "",
      partTotalNumber: "",
      batchList: [], //批次
      partsList: [], //零件
      form: {
        deviceToken: "12321386", //当前炉号 022 fa09b998-94af-4f08-aae4-b17f6c3d404d_2a0e5126-1bec-46c3-b7a6-13e914f0165d
        deviceName: "65#",
        batchNumber: "",
      },
    };
  },
  async mounted() {},
  methods: {
    async openDialog() {
      this.form.deviceName = this.deviceRow.name || "65#";
      this.form.deviceToken = this.deviceRow.token || "12321386";
      this.batchList = await this.$store.dispatch("application/getFormlas", {
        deviceToken: this.form.deviceToken,
      });
    },
    submit() {
      if (this.partsList.length == 0) {
        this.$msg("请选择批次");
        return;
      }
      this.$store.commit("application/addParts", this.partsList);
      this.$emit("update:dialogVisible", false);
      this.form.batchNumber = "";
      this.partsList = [];
      this.partTotalNumber = "";
      this.toolingNumber = "";
    },
    //   选择批次
    async handleChangeBatch(val) {
      this.partsList = [];
      this.partTotalNumber = "";
      this.toolingNumber = "";
      const obj = this.batchList.find((item) => item.id == val);
      const { partTotalNumber, toolingNumber, batchNumber } = obj;
      this.partTotalNumber = partTotalNumber;
      this.toolingNumber = toolingNumber;
      const partsList = await this.$store.dispatch("application/getFormlas", {
        deviceToken: this.form.deviceToken,
        batchNumber: batchNumber,
      });
      console.log("val :>> ", partsList);
      if (partsList.length) {
        this.partsList = [partsList[0]];
      }
    },
    handleClose() {
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>

<style lang='scss' scoped>
.export_form_box {
  /deep/ .el-input__inner {
    color: #fff;
  }
  .parts_box {
    margin-top: 10px;
    .garp {
      padding: 6px;
      background-color: #081f63;
      color: #fff;
      margin-bottom: 10px;
    }
  }
  .display_flex parts_list {
    display: flex;
    align-items: center;
  }
  .parts_list {
    margin-bottom: 10px;
  }
}
</style>